<template>
	<Transition name="tip-fade">
		<div v-if="visible" class="ly-tip-container" :class="[`tip-${type}`]">
			<div class="ly-tip-content">
				<i class="ly-tip-icon" :class="iconClass" />
				<span>{{ message }}</span>
			</div>
		</div>
	</Transition>
</template>

<script lang="ts">
import type { PropType } from 'vue';
import type { TipType } from '@/utils/util.tip';

export default defineComponent({
	name: 'LyTip',
	props: {
		message: {
			type: String,
			required: true,
		},
		type: {
			type: String as PropType<TipType>,
			default: 'info',
		},
		duration: {
			type: Number,
			default: 3000,
		},
		onDestroy: {
			type: Function as PropType<() => void>,
			default: undefined,
		},
	},
	setup(props) {
		const visible = ref(false);

		const iconClass = computed(() => {
			const iconMap = {
				success: 'i-carbon-checkmark-filled',
				warning: 'i-carbon-warning-filled',
				info: 'i-carbon-information-filled',
				error: 'i-carbon-error-filled',
			};
			return iconMap[props.type];
		});

		onMounted(() => {
			visible.value = true;
			setTimeout(() => {
				visible.value = false;
				setTimeout(() => {
					props.onDestroy?.();
				}, 300);
			}, props.duration);
		});

		return {
			visible,
			iconClass,
		};
	},
});
</script>

<style scoped>
.ly-tip-container {
	top: 20px;
	left: 50%;
	display: flex;
	z-index: 9999;
	position: fixed;
	padding: 10px 10px;
	padding-left: 0;
	background: white;
	border-radius: 4px;
	align-items: center;
	transform: translateX(-50%);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ly-tip-content {
	gap: 8px;
	display: flex;
	font-size: 14px;
	align-items: center;
}

.ly-tip-icon {
	font-size: 20px;
}

.tip-success {
	color: #67c23a;
	border-left: 4px solid #67c23a;
}

.tip-success .ly-tip-icon {
	color: #67c23a;
}

.tip-warning {
	color: #e6a23c;
	border-left: 4px solid #e6a23c;
}

.tip-warning .ly-tip-icon {
	color: #e6a23c;
}

.tip-info {
	border-left: 4px solid #909399;
}

.tip-info .ly-tip-icon {
	color: #909399;
}

.tip-error {
	color: #f56c6c;
	border-left: 4px solid #f56c6c;
}

.tip-error .ly-tip-icon {
	color: #f56c6c;
}

.tip-fade-enter-active,
.tip-fade-leave-active {
	transition: all 0.3s ease;
}

.tip-fade-enter-from,
.tip-fade-leave-to {
	opacity: 0;
	transform: translate(-50%, -20px);
}
</style>
